@import "variables";

circle-item{
  background: color($h5,c10);
  .circle-info {
    display: flex;
    width: 100%;
    height: pxTorem(160);
    padding: pxTorem(40) pxTorem(30) pxTorem(20);
    font-size: pxTorem(32);
    color: color($h5, c2);

    .circle-icon{
      width: pxTorem(100);
      height: pxTorem(100);
      flex-shrinK: 0 ;
      margin-right: pxTorem(20);
      position: relative;
      img{
        display: block;
        width: pxTorem(100);
        height: pxTorem(100);
        border-radius: pxTorem(20);
      }
    }
    .info-text {
      display: flex;
      width: 90%;
      align-items: left;
      flex-direction: column;
      line-height: 1;
      .icon{
        display: block;
        margin-left:pxTorem(10);
        margin-right:pxTorem(20);
        @include icon(70, 32, '#{$icons-path}/circle_hot.png');
      }
      .blocks{
        display: block;
        width: 100%;
      }

      .item-circle-name{
        height: pxTorem(38);
        line-height: pxTorem(38);
        @include text-overflow-percent-ellipsis(100%);
      }
      .circle-name-wrap{
        max-width: 100%;
      }
      .circle-intro{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: pxTorem(25);
        line-height: pxTorem(30);
        font-size: pxTorem(26);
        color: color($h5, c3);
        //@include text-overflow-percent-ellipsis(90%);
      }
    }

    .circle-join{
      margin-left: pxTorem(30);
      button{
        width:pxTorem(106) ;
        height: pxTorem(52);
        border-radius: pxTorem(26);
        background: #23c270;
        color: color($h5,c10);
        font-size: pxTorem(22);
        white-space: nowrap;
      }
    }
  }
}

